<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的修饰符</title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- v-if的优先级 > v-for的优先级 -->
			<!-- <div v-for="val in formData">
				<input
				v-if="val.inputType == 'text'"
				:name="val.inputName"
				v-model="val.value"
				:placeholder="val.placeholder"
				:type="val.inputType"/>
				<textarea
				v-else-if="val.inputType == 'textarea'"
				:name="val.inputName"
				v-model="val.value"
				:placeholder="val.placeholder"
				:type="val.inputType"
				cols="30"
				rows="10"></textarea>
			</div> -->
		</div>
	</body>
</html>
<script>
	// vue的修饰符
	const {createApp} = Vue;
	const app = createApp({
		// 1.0表单修饰符
		// 1.1:.lazy,懒加载
		// 1.2:.number,将输入内容自动转换为数字
		// 1.3:.trim,去掉首尾空格
		//
		// 2.0事件修饰符
		// 2.1:.stop防止事件冒泡
		// 2.2:.prevent阻止默认事件
		// 2.3:.capture启用事件捕获模式，优先捕获事件
		// 2.4:.self 当e.target为自身对象时触发
		// 2.5:.once,事件只触发一次
		data(){
			return{
				formData:[
					{
						inputType:'text',
						inputName:'phoneNum',
						placeholder:'电话号码',
						phoneNum:undefined,
						value:''
					},
					{
						inputType:'text',
						inputName:'nickName',
						placeholder:'昵称',
						phoneNum:undefined,
						value:''
					},
					{
						inputType:'textarea',
						inputName:'introduce',
						placeholder:'自我介绍',
						phoneNum:undefined,
						value:''
					},
				]
			}
		}
	});
	const vm = app.mount('#app')
</script>